<template>
	<view class="person-info">
		<view class="touxiang">
			<view class="upload-image" @click="uploadImage">
				<template v-if="imageSrc==''">
					<text>+</text>
					<text>
						请上传头像
					</text>
				</template>
				<template v-else>
					<image :src="imageSrc" mode=""></image>
				</template>
			</view>
		</view>
		<view class="username">
			<input type="text" v-model="userinfo.userName" placeholder="请输入您的昵称" />
		</view>
		<view class="birthday">
			<input type="text" v-model="userinfo.userBirthday" placeholder="请选择您的生日,例子:yy-mm-dd" />
		</view>
		<view class="reset">
			<view class="reset-btn" @click="shezhi">
				<text>设置</text>
			</view>
			<view class="reset-btn" @click="reLogin">
				<text>退出</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {createNamespacedHelpers} from "vuex"
	let {mapActions}=createNamespacedHelpers("mine")
	export default {
		data() {
			return {
				imageSrc:"",
				userinfo:{
					userName:"",
					userBirthday:""
				}
			};
		},
		methods:{
			...mapActions(["updateTouxiangInfo","updateUserInfoAll"]),
			reLogin(){
				uni.removeStorageSync('auth_token');
				uni.showModal({
					title:"退出登录",
					content:"您已退出，请重新登录",
					success(res) {
						if(res.confirm){
							uni.navigateTo({
								url:'../../login/login'
							})
						}else{
							uni.switchTab({
								url:'../../home/home'
							})
						}
					}
				})
			},
			uploadImage(){
				let that=this
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album',"camera"], //从相册选择
				    success: function (res) {
						that.imageSrc=res.tempFilePaths[0]
				    }
				});
			},
			async shezhi(){
				// uni.request({
				// 	url:"",
				// 	method:"put",
					
				// })
				// let data =await this.updateTouxiangInfo(this.imageSrc)
				// console.log(data)
				uni.uploadFile({
					url: 'http://38478x75s7.qicp.vip/user/user-information/update-image', //仅为示例，非真实的接口地址
					filePath: this.imageSrc,
					name: 'file',
					header:{"Content-Type":"multipart/form-data","auth_token": uni.getStorageSync("auth_token")},
					formData: {
						'user': 'text'
					},
					success: (uploadFileRes) => {
						console.log(JSON.parse(uploadFileRes.data) );
					}
				});

				let data1=await this.updateUserInfoAll(this.userinfo)
				if(data1.code==1330){
					uni.showToast({
						title:"修改成功",
						success() {
							uni.switchTab({
								url:"../mine"
							})
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.person-info{
		width: 100vw;
		height: 100vh;
		background-color: #f9f9f9;
		.touxiang{
			.upload-image{
				width: 400rpx;
				height: 400rpx;
				border: 5rpx solid #868686;
				border-radius: 100%;
				margin: 30rpx auto 0rpx;
				font-weight: bold;
				line-height: 400rpx;
				text-align: center;
				text{
					color: #868686;
					font-size: 40rpx;
				}
				image{
					width: 100%;
					height: 100%;
					border-radius: 100%;
				}
			}
		}
		.username{
			border-bottom: 1px solid #d3d3d3;
			width: 100vw;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			margin: 30rpx auto 0rpx;
		}
		.birthday{
			border-bottom: 1px solid #d3d3d3;
			width: 100vw;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			margin: 30rpx auto 0rpx;
		}
		.reset{
			.reset-btn{
				width: 300rpx;
				height: 60rpx;
				background-color: tomato;
				color: white;
				text-align: center;
				line-height: 60rpx;
				margin: 30rpx auto 0rpx;
			}
		}
	}
</style>
